<div style="display: inline-block;">
  <input type="button"" class="cbi-button cbi-button-add" id="btnload" name="load" value="<%:Load%>" />
  <input type="file" id="file_load" style="visibility:hidden; position: absolute;top: 0px; left: 0px;" accept="application/x-tar" />
</div>
<script type="text/javascript">
  let btnLoad = document.getElementById('btnload')
  btnLoad.onclick = function (e) {
    document.getElementById("file_load").click()
    e.preventDefault()
  }
  let fileLoad = document.getElementById('file_load')
  fileLoad.onchange = function(e){
    let fileLoad = document.getElementById('file_load')
      if (!fileLoad.value) {
      return
    }
    let fileName = fileLoad.files[0].name
    let formData = new FormData()
    formData.append('upload-filename', fileName)
    formData.append('upload-archive', fileLoad.files[0])
    let xhr = new XMLHttpRequest()
    uci_confirm_docker()
    xhr.open("POST", '<%=luci.dispatcher.build_url("admin/docker/images_load")%>', true)
    xhr.onload = function() {
      location.reload()
    }
    xhr.send(formData)
  }
</script>
